<template>
  <div class="searchContainer">
    <van-search
      v-model="searchTitle"
      show-action
      placeholder="请输入商品名称"
      @search="onSearch"
      @cancel="onCancel"
    />
    <div v-if="!searchTitle">
      <div class="historyWrap" v-show="defaultKeywords.length">
        <div class="historyTop">
          <span>历史记录</span>
          <span class="iconfont icon-shanchu" @click="handleDelete"></span>
        </div>
        <div class="historyBottom">
          <div class="historyItem" :class="{hover:name === item}" v-for="(item,index) in defaultKeywords" :key="index" @click="handleHistory(item)">{{item}}</div>
        </div>
      </div>
      <div class="historyWrap hot">
        <div class="historyTop">
          <span>热门搜索</span>
        </div>
        <div class="historyBottom">
          <div
            class="historyItem"
            v-for="(item, index) in hotKeywordVOList"
            :key="index"
            :class="{ active: item.highlight === 1 }"
            @click="handleHighlight(item)"
          >
            {{ item.keyword }}
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="keywordList">
        <div class="keywordItem" v-for="(item,index) in keywordList" :key="index" @click="toSearchDetail(item)">
          <span class="itemText">{{item}}</span>
          <span class="itemIcon iconfont icon-jiantou"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Search",
  data() {
    return {
      searchTitle: "",
      name:'',
      defaultKeywords:JSON.parse(localStorage.getItem('defaultKeywords')) || [], // 历史记录
    };
  },
  methods: {
    // 点击取消返回首页
    onCancel(){
      !this.searchTitle && this.$router.push('/home')
    },
    // 点击删除所有历史记录
    handleDelete(){
      localStorage.removeItem('defaultKeywords');
      this.defaultKeywords = []
    },
    // 点击回车按钮后触发
    onSearch(val) {
      if(!val) return 
      this.searchTitle = val;
      let isHas = this.defaultKeywords.some(item => item === val)
      if(isHas) return  
      this.defaultKeywords.push(val)
      localStorage.setItem('defaultKeywords',JSON.stringify(this.defaultKeywords))
      // this.$store.dispatch('get_history',val)
      this.$router.push('/searchDetail?keyword=' + val )
    },
    // 点击历史记录中的某一项，跳转到详情页
    handleHistory(item){
      this.name = item;
      this.$router.push('/searchDetail?keyword=' + item )
    },
    // 点击关键字中某一项，跳转到详情页
    toSearchDetail(keyword){
      let isHas = this.defaultKeywords.some(item => item === keyword)
      !isHas && this.defaultKeywords.push(keyword) && localStorage.setItem('defaultKeywords',JSON.stringify(this.defaultKeywords))
      this.$router.push('/searchDetail?keyword=' + keyword )
    },
    // 点击切换热门搜索高亮
    handleHighlight(current) {
      // 排它操作
      this.hotKeywordVOList.forEach((item) => {
        item.highlight = 0;
        if (item.keyword === current.keyword) {
          item.highlight = 1;
        }
      });
      this.defaultKeywords.push(current.keyword)
      localStorage.setItem('defaultKeywords',JSON.stringify(this.defaultKeywords))
      this.$router.push('/searchDetail?keyword=' + current.keyword )
    },
  },
  mounted() {
    document.querySelector('.van-field__control').focus()
    const searchTitle = this.$route.query.keyword;
    if(searchTitle){
      this.searchTitle = searchTitle
    }
    this.$store.dispatch("getDefaultHotKeyword");
  },
  computed: {
    ...mapState({
      hotKeywordVOList: state => state.search.hotKeywordVOList,
      keywordList: state => state.search.keywordList,
    }),
  },
  watch:{
    searchTitle(val){
      if(val){
        this.timeId
        if(this.timeId) clearTimeout(this.timeId)				
        this.timeId = setTimeout(()=>{			
          this.$store.dispatch('getKeywordList',val)				
        },500)	
      }
    }
  }
};
</script>

<style lang="less" scoped>
.searchContainer {
  width: 100%;
  height: 100%;
  background-color:#fff;
  .van-search {
    margin: 5px 10px;
    .van-search__content {
      background-color: #f4f4f4;
      border-radius: 5px;
    }
  }
  .historyWrap {
    padding: 0 20px 25px;
    border-bottom: 10px solid #eee;
    // margin-bottom: 10px;
    &.hot {
      padding-top: 15px;
      border-bottom: none;
    }
    .historyTop {
      font-size: 16px;
      color: #999;
      display: flex;
      justify-content: space-between;
    }
    .historyBottom {
      display: flex;
      flex-wrap: wrap;
      .historyItem {
        padding: 3px 5px;
        margin: 15px 15px 0 0;
        color: #333333;
        font-size: 12px;
        border: 1px solid #999;
        border-radius: 3px;
        &.active {
          border-color: #dd1a21;
          color: #dd1a21;
        }
        &.hover {
          background-color: #ccc;
          border-color: #ccc;
          color: #fff;
        }
      }
    }
  }
  .keywordList {
    margin: 10px 0 0 10px;
    .keywordItem {
      padding-right: 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      // align-items: center;
      height: 45px;
      line-height: 45px;
      border-bottom: 1px solid #eee;
      color: #333;
      .itemText {
        font-size: 14px;
      }
      .iconfont {
        font-size: 12px;
        color: rgb(36, 33, 33);
      }
    }
  }
}
</style>